{% extends 'base.html' %}
{%block title%}consolePage{% endblock %}
{% block css %}
<link rel="stylesheet" href="{{url_for('static',filename='css/homeOne.css')}}" />
<link rel="stylesheet" href="{{url_for('static',filename='css/console.css')}}" />
<link rel="stylesheet" href="{{url_for('static',filename='css/font-awesome.min.css')}}" />
{% endblock %}
{% block js %}
<script src="{{url_for('static',filename='js/home.js')}}"></script>
<script src="{{url_for('static',filename='js/console.js')}}"></script>
<script type="text/javascript" src="../static/libs/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../static/libs/echarts.min.js"></script>
<script type="text/javascript" src="../static/libs/Chart.js"></script>
{% endblock %}
{% block rightcontext %}
<div class="content-wrapper">
    <div class="features">

        <div class="feature one">
            <a href="{{url_for('domainName')}}">
                <i class="fa fa-tags"></i>
                <h3 class="right-title">域名</h3>
                <h5 class="right-content">总数:{{counts.domaincount}}</h5>
            </a>
        </div>

        <div class="feature one">
            <a href="{{url_for('IP')}}">
                <i class="fa fa-magnet"></i>
                <h3 class="right-title">IP</h3>
                <h5 class="right-content">总数:{{counts.ipcount}}</h5>
            </a>
        </div>
        <div class="feature one">
            <a href="{{url_for('buglist')}}">
                <i class="fa fa-bug"></i>
                <h3 class=" right-title">漏洞</h3>
                <h5 class="right-content">总数：{{counts.bugcount}}</h5>
            </a>
        </div>
        <div class="feature one">
            <a href="{{url_for('POCmanage')}}">
                <i class="fa fa-clipboard"></i>
                <h3 class="right-title">POC</h3>
                <h5 class="right-content">总数：{{counts.poccount}}</h5>
            </a>
        </div>
    </div>
    <div class="contents">
        <div class="content">
            <a href="{{url_for('domaindetail')}}">
                <i class="fa fa-bar-chart"></i>
                <h3>最近扫描</h3>
                <h5>{{lastscantime}}</h5>
            </a>
        </div>
        <div class="content">
            <a href="{{url_for('index')}}">
                <i class="fa fa-desktop"></i>
                <h3>受影响主机</h3>
                <h5>{{counts.havebugpc}}</h5>
            </a>
        </div>
        <div class="content">
            <a href="{{url_for('seriousBug')}}">
                <i class="fa fa-exclamation-circle" style="font-size: 38px;"></i>
                <h3>严重漏洞</h3>
                <h5>{{counts.seriouscount}}</h5>
            </a>
        </div>
        <div class="content">
            <a href="{{url_for('FileLeakBug')}}">
                <i class="fa fa-github" style="font-size: 38px;"></i>
                <h3>泄露总数</h3>
                <h5>{{counts.sencount}}</h5>
            </a>
        </div>
    </div>
</div>
<div class="content-mid">
    <form class="myForm" method="POST" action="" id="task" name="myTask">
        <textarea name="urls" rows="10" cols="30" placeholder="按行输入，输入格式例如：
        http://www.baidu.com
        www.baidu.com
        http://127.0.0.1
        127.0.0.1
        "></textarea>
        <button class="newtask" id="begin" type="submit" onclick="submit_query()">新建任务</button>
    </form>
    <div class="contentNums">
        <p class="p1">正扫描:{{target.nowscan}}</p>
        <p class="p2">待扫描:{{target.waitcount}}</p>
        <p class="p3">已扫描:{{target.sumcount}}</p>
    </div>
</div>
<!-- <div class="con">
    <span class="progressBar">
        <div id="progressFill"></div>
    </span>
    <span class="progressText"> 扫描进度 </span>
    <span id="percentage">0%</span> 
</div> -->
<div class="skill">
    <div id="prog_out" class="progress progress-striped active">
        <div id="prog_in" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0"
            aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        </div>
    </div>
    <span class="progressText"> 扫描进度 </span>
    {% if target.sumcount+target.waitcount!=0 %}
    <span id="percentage" class="skill-per" per="{{target.sumcount/(target.sumcount+target.waitcount)}}">%</span>
    {% else %}
    <span id="percentage1" class="skill-per" per="0">%</span>
    {% endif %}
</div>

<div class="charts">
    <div class="bar-graph">
        <h5 class="bar-title">开放端口</h5>
        <canvas id="myChart" width="850" height="400"></canvas>
    </div>
    <div class="curve-graph">
        <h5 class="bar-title">运行服务
        </h5>
        <canvas id="myCurveChart" width="850" height="400"></canvas>
    </div>
</div>
{% endblock %}
{% block addjs %}
<script>

    //漏洞类型部分

    $('.skill-per').each(function () {
        var $this = $(this);
        var per = $this.attr('per');
        $this.css("width", per + '%');
        $({ animatedValue: 0 }).animate(
            { animatedValue: per },
            {
                duration: 300,
                step: function () {
                    $this.attr('per', Math.floor(this.animatedValue) + '%');
                },
                complete: function () {
                    $this.attr('per', Math.floor(this.animatedValue) + '%');
                }
            }
        );
    });

    //饼状图部分
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    app.title = "百分比";

    var option = {
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#90ee90", "#7342fa", "#fdb903", "#e9003a",],
        legend: {
            orient: "horizontal",
            x: "center",
            data: ["低危", "中危", "高危", "严重"],
        },
        series: [
            {
                name: "漏洞属性",
                type: "pie",
                radius: ["40%", "80%"],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: "center",
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: "20",
                            fontWeight: "bold",
                        },
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                data: [
                    {
                        value: "{{ bugbit.lowcount }}",
                        name: "低危",
                    },
                    {
                        value: "{{ bugbit.mediumcount }}",
                        name: "中危",
                    },
                    {
                        value: "{{ bugbit.highcount }}",
                        name: "高危",
                    },
                    {
                        value: "{{ bugbit.seriouscount }}",
                        name: "严重",
                    },
                ],
            },
        ],
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    //扫描进度条部分
    function submit_query(btn) {
        var sitv = setInterval(function () {
            var prog_url = " "
            $.getJSON(prog_url, function (res) {
                $('#prog_in').width(res + '%');
            });
        }, 1000);                                 // 每1秒查询一次后台进度

        var this_url = " "
        var yourjson = " "
        $.getJSON(thisurl, yourjson, function (res) {
            // ...
            clearInterval(sitv);
            $('#prog_out').attr("class", "progress progress-bar-success");
        });
    }

    //扫描进度条部分
    //总数量{{target.sumcount+target.waitcount}}
    //已扫描数量{{target.sumcount}}

    // $("#begin").on("click", function () {
    //     $("#progressFill").animate(
    //         {
    //             width: "100%",
    //         },
    //         10 * 1000
    //     );
    //     var count = 0;
    //     var timer = setInterval(function () {
    //         count++;
    //         var percentageValue = count + "%";
    //         $("#percentage").html(percentageValue);
    //         if (count >= 100) clearInterval(timer);
    //     }, 99);
    // });

    $('.skill-per').each(function () {
        var $this = $(this);
        var per = $this.attr('per');
        $this.css("width", per + '%');
        $({ animatedValue: 0 }).animate(
            { animatedValue: per },
            {
                duration: 300,
                step: function () {
                    $this.attr('per', Math.floor(this.animatedValue) + '%');
                },
                complete: function () {
                    $this.attr('per', Math.floor(this.animatedValue) + '%');
                }
            }
        );
    });
    // 柱状图部分
    var ctx = document.getElementById("myChart").getContext("2d");
    var data = {
        /// 表现在X轴上的数据，数组形式
        labels: ["80", "8080", "443", "8081", "22", "85", "3389", "9000", "8088", "8090", "3306", "8000"],

        datasets: [
            /// 第一条线
            {
                /// 曲线的填充颜色
                fillColor: " rgb(86, 86, 240)",
                /// 填充块的边框线的颜色
                strokeColor: " rgb(22, 122, 253);",
                /// 表示数据的圆圈的颜色
                pointColor: " rgb(86, 86, 240)",
                /// 表示数据的圆圈的边的颜色
                pointStrokeColor: "#fff",
                data: ["{{ ports.test80 }}", "{{ ports.test8080 }}", "{{ ports.test443 }}", "{{ ports.test8081}}", "{{ports.test22}}", " {{ ports.test85 }}", "{{ ports.test3389 }}", "{{ ports.test9000 }}", "{{ ports.test8088 }}", "{{ ports.test8090 }}", "{{ ports.test3306 }}", "{{ ports.test8000 }}"]
            },

        ]
    }
    /// 动画效果call
    var options = {
        scaleFontStyle: "normal"
    }
    //生成柱状图
    new Chart(ctx).Bar(data);

    // 折线图部分
    var ctx = document.getElementById("myCurveChart").getContext("2d");
    var data = {
        /// 表现在X轴上的数据，数组形式
        labels: ["http", "ssh", "mysql", "http-proxy", "mongodb", "ftp", "tcpwrapped", "http-alt", "telnet", "https", "redis"],

        datasets: [
            /// 第一条线
            {
                /// 曲线的填充颜色
                fillColor: " #f8f8ff",
                /// 填充块的边框线的颜色
                strokeColor: " rgb(86, 86, 240)",
                /// 表示数据的圆圈的颜色
                pointColor: " rgb(86, 86, 240)",
                /// 表示数据的圆圈的边的颜色
                pointStrokeColor: "#fff",
                data: ["{{services.http}}", "{{services.ssh}}", "{{services.mysql}}", "{{services.http_proxy}}", "{{services.mongodb}}", "{{services.ftp}}", "{{services.tcpwrapped}}", "{{services.http_alt}}", "{{services.telnet}}", "{{services.https}}", "{{services.redis}}"]
            },
        ]
    }
    /// 动画效果call
    var options = {
        // scaleFontStyle: "normal"
    }
    /// 创建对象，生成折线图表
    new Chart(ctx).Line(data, options);
</script>
{% endblock %}